
/** 
  实习需求报名学院填报
*/
<style scoped>
.p_cals:hover{
  cursor: pointer;
  color: #409eff;
}
.p_cals{
  color: #aaa
}
</style>

<style rel="stylesheet/scss" lang="scss" scoped>
.inner-breadcrumb {
    .breadcrumb {
        span {
            font-weight: normal;
            color: #aaa;
        }
        a {
            font-weight: normal;
            color: #aaa;
        }
        a:hover {
            color: #409eff;
        }
        .last {
            font-weight: bold !important;
            cursor: default !important;
        }
        .disable {
            cursor: default !important;
        }
    }
}
.condition-title-p {
    font-weight: 400;
    font-style: normal;
    color: #2b3b4e;
    font-size: 18px;
    margin-bottom: 15px;
}
.base-info-title {
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    color: #2b3b4e;
}
.table-style-baseinfo {
    background-color: rgba(210, 212, 214, 1);
    box-sizing: border-box;
    border-width: 0.5px;
    border-style: solid;
    border-color: rgba(210, 212, 214, 1);
    border-radius: 0px;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    width: 100%;
    font-weight: 401;
    font-style: normal;
    font-size: 14px;
    color: #8896a7;
    margin-bottom: 20px;
}
.table-style-baseinfo td {
    width: 25%;
    background-color: rgba(255, 255, 255, 1);
    border: none;
    border-radius: 0px;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    font-weight: 401;
    font-style: normal;
    font-size: 14px;
    color: #2b3b4e;
    height: 32px;
    padding: 0 10px;
}
.table-style-baseinfo .text-right-background-color {
    background-color: #fdfeff4d;
    text-align: right;
}
.text-left-background-none {
    text-align: left;
}
</style>
<template>
  <div >
      <el-row type="flex" class="row-bg" justify="space-between">
        <div>
          <span @click="goBack" class="p_cals">{{$t('requirement.registration')}}</span> / <span>{{internshipDemand}}</span>
        </div>
        <el-button @click="cancelDialog" type="text">{{$t('requirement.back')}}</el-button>
      </el-row>
      <p></p>
      <el-card>
        <el-row type="flex" class="row-bg" justify="space-between">
          <h2>{{$t('requirement.practice')}}</h2>
            
        </el-row>
        <hr style="border-top: 2px solid #eee;">
        <h3 style="margin-left:20px">{{$t('requirement.information')}}</h3>
        
        <table style="margin-left:10px"  class="table-style-baseinfo">
          <tr>
              <td class="text-right-background-color">{{$t('requirement.semester')}}:</td>
              <td class="text-left-background-none" colspan="3">{{dataForm.calendarName}}</td>
              
          </tr>
          <tr>
              <td class="text-right-background-color">{{$t('requirement.internship')}}:</td>
              <td class="text-left-background-none">{{dataForm.baseName}}</td>
              <td class="text-right-background-color">{{$t('requirement.namePost')}}:</td>
              <td class="text-left-background-none">{{dataForm.positionName}}</td>
          </tr>
          <tr>
              <td class="text-right-background-color">{{$t('requirement.college')}}:</td>
              <td class="text-left-background-none">{{dataForm.collegeAcademy | collegeAcademyList(options.faculty)}}</td>
              <td class="text-right-background-color">{{$t('requirement.major')}}:</td>
              <td class="text-left-background-none">{{dataForm.major | collegeAcademy(options.degreeType)}}</td>
          </tr>
          <tr>
            <td class="text-right-background-color">{{$t('requirement.demand')}}:</td>
            <td class="text-left-background-none"  >{{dataForm.personNum}}</td>
            <td class="text-right-background-color">{{$t('requirement.workplace')}}:</td>
            <td class="text-left-background-none"  >{{dataForm.workAddress}}</td>
          </tr>
          <tr>
              <td class="text-right-background-color" >{{$t('requirement.treatment')}}:</td>
              <td class="text-left-background-none" colspan="3" style="max-width: 300px; word-wrap: break-word; overflow: auto;">{{dataForm.treatment}}</td>
              <!-- <td class="text-right-background-color">{{$t('requirement.effectiveEnd')}}:</td>
              <td class="text-left-background-none">{{dataForm.competitionLevelName}}</td> -->
          </tr>
          <tr>
              <td class="text-right-background-color">{{$t('requirement.dateOperat')}}:</td>
              <td class="text-left-background-none">{{dataForm.workTimeStart}}</td>
              <td class="text-right-background-color">{{$t('requirement.workingDate')}}:</td>
              <td class="text-left-background-none">{{dataForm.workTimeEnd}}</td>
          </tr>
          <tr>
              <td class="text-right-background-color" >{{$t('requirement.requirement')}}:</td>
              <td class="text-left-background-none" colspan="3" style="max-width: 300px; word-wrap: break-word; overflow: auto;">{{dataForm.majorRequirements}}</td>
              <!-- <td class="text-right-background-color">{{$t('graduate.college')}}:</td>
              <td class="text-left-background-none">{{dataForm.awardLevel}}</td> -->
              
          </tr>
          <!-- <tr>
          <td class="text-left-background-none" colspan="4" ></td>
          </tr> -->
          <tr>
              <td class="text-right-background-color">{{$t('requirement.declarati')}}:</td>
              <td class="text-left-background-none" >{{dataForm.applyTimeStart}}</td>
              <td class="text-right-background-color">{{$t('requirement.reporti')}}:</td>
              <td class="text-left-background-none"  >{{dataForm.applyTimeEnd}}</td>
          </tr>
          <tr>
              <td class="text-right-background-color">{{$t('requirement.accessory')}}:</td>
              <td class="text-left-background-none" colspan="3" style="max-width: 300px; word-wrap: break-word; overflow: auto;">
                <!-- <p v-for="item in dataForm.fileList" :key="item.fileId"> -->
                  <a @click="download(dataForm.enclosureFileUrl)">{{dataForm.enclosureFileName}}</a>
                <!-- </p> -->
              </td>
          </tr>
        </table>
      <!-- </el-card> -->
        <p></p>
        <h2 style="margin-left:20px">{{$t('requirement.studentInforma')}}</h2>
        <el-row type="flex" class="row-bg" justify="end">
          <el-button @click="cancelRemove" type="danger">{{$t('requirement.remove')}}</el-button>
          <el-button @click="cancelAdd" type="primary">{{$t('requirement.add')}}</el-button>
        </el-row>
        <p></p>
         <edu-table :pagination="false"  :tooltipEffect="tooltipEffect" stripe :data="dataList" size="mini" @selection-change="handleSelectionChange">
        
          <edu-table-column :label="$t('internProgress.studentNumber')" prop="studentId">
            <template slot-scope="scope">
              <span v-if="!scope.row.status">{{scope.row.studentId}}</span>
              <div v-if="scope.row.status">
                <el-input v-model="scope.row.studentId"  @blur='changeBlur'></el-input>
                <!-- @keyup.enter.native="changeBlur" -->
              </div>
          </template>
          </edu-table-column>
          <edu-table-column :label="$t('internProgress.name')" prop="name">
            
          </edu-table-column>
          <edu-table-column :label="$t('internProgress.grade')" prop="grade"></edu-table-column>
          <edu-table-column :label="$t('internProgress.college')" prop="facultyI18n"></edu-table-column>
          <edu-table-column :label="$t('internProgress.profession')" prop="professionI18n"></edu-table-column>
          <edu-table-column :label="$t('internProgress.trainingLevel')" prop="trainingLevelI18n"></edu-table-column>
          <edu-table-column :label="$t('internProgress.cultivationCategory')" prop="trainingCategoryI18n">
           
          </edu-table-column>
          <edu-table-column :label="$t('internProgress.degreeType')" prop="degreeTypeI18n"></edu-table-column>
          <edu-table-column :label="$t('internProgress.waysOfLearning')" prop="formLearningI18n"></edu-table-column>
        </edu-table>
        <!-- <el-row type="flex" class="row-bg" justify="end">
          <el-col>
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="queryFormList.pageNum_"
              :page-sizes="[20, 40, 80, 100]"
              :page-size="queryFormList.pageSize_"
              layout="total, sizes, prev, pager, next, jumper"
              :total="queryFormList.total_"
              style="float:right;margin-top:10px"
            ></el-pagination>
          </el-col>
        </el-row> -->
        <p></p>
        <el-row type="flex" class="row-bg" justify="end">
          <el-button @click="cancel" >{{$t('requirement.cancel')}}</el-button>
          <el-button @click="submit" type="primary">{{$t('requirement.submit')}}</el-button>
        </el-row>
        <el-dialog
          width="25%"
          ref="innerDialog"
          :title="$t('graduateBase.prompt')"
          :visible.sync="innerVisible"
          append-to-body
          :top="'28vh'">
          <div style="text-align: left;margin-bottom: 25px;">{{$t('graduateBase.cancelTip')}}</div>
          <div style="text-align: right;">
            <el-button type="primary" @click="confirmInner">{{$t('common.btn.confirm')}}</el-button>
            <el-button @click="cancelInner">{{$t('common.btn.cancel')}}</el-button>
            <el-button type="primary" @click="confirmAndClose">{{$t('graduateBase.saveAndClose')}}</el-button>
          </div>
        </el-dialog>
        <el-dialog>

        </el-dialog>
    </el-card>
  </div>
</template>

<script>
import { queryDic } from "common/src/api/dictionary";
import UTILS from "common/src/utils/utils";
import {downloadfile} from "common/src/api/upload";
import graduateStudent from 'common/src/api/graduateStudent/graduateStudent';
export default {
  
  props: {
    
    dataListObj: {
      type: String
    },
    dataProp: {
      type: String
    },
    dataListProp: {
      type: Object
    },
    showFlag: {
      type: Boolean
    },
    agent: {
      type: Boolean,
      default: false,
      required: false
    },
    admin: {
      type: Boolean,
      default: false,
      required: false
    }
  },
  data() {
    
    let validateNum = (rule, value, callback) => {
      // let reg = /^[0-9]*$/;
      let reg = /^[1][3,4,5,7,8][0-9]{9}$/;
      if (!reg.test(value) || value === '') {
        return callback(new Error(this.$t('mainbase.pleasePhone')));
      }
      return callback();
    };
    return {
      dataList: [],
      fileList: [],
      queryFormList: {
        pageNum_: 1,
        pageSize_: 20,
        total_: 0
      },
      collegeAcademy: 'collegeAcademy',
      innerVisible: false,
      queryForm: {
        startTime: null,
        endTime: null,
        majorList: '',
        num: 1,
        baseName: '',
        baseLevel: '',
        provinceCity: '',
        address: '',
        legalPresident: '',
        isEnabled: '',
        baseContactPerson: '',
        baseContactPhone: '',
        baseContactEmail: '',
        collegeAcademy: '',
        collegeContactPhone: '',
        enclosureFileUrl: '',
        enclosureFileName: '',
        status: '',
        collegeContactPerson: ''
      },
      status: false,
      dataForm: {},
      internshipDemand: '学院申请',
      auths: [], // 按钮权限
      options: {
        faculty: [],
         profession: [],
        degreeType: []
      },
      pickerOptionsStart: {
        disabledDate: time => {
          let endDateVal = this.queryForm.endTime;
          if (endDateVal) {
            return time.getTime() > new Date(endDateVal).getTime();
          }
        }
      },
      pickerOptionsEnd: {
        disabledDate: time => {
          let beginDateVal = this.queryForm.startTime;
          if (beginDateVal) {
            return time.getTime() < new Date(beginDateVal).getTime();
          }
        }
      },
      multipleSelection: [],
      rules: {
        baseName: [
          { required: true, message: this.$t('internship.pleaseEnter'), trigger: 'blur' }
        ],
        startTime: [
          { required: true, message: this.$t('graduate.pleaseSelect'), trigger: 'change' }
        ],
        endTime: [
          { required: true, message: this.$t('graduate.pleaseSelect'), trigger: 'change' }
        ],
        baseLevel: [
          { required: true, message: this.$t('graduate.pleaseSelect'), trigger: 'change' }
        ],
        isEnabled: [
          { required: true, message: this.$t('graduate.pleaseSelect'), trigger: 'change' }
        ],
        provinceCity: [
          { required: true, message: this.$t('internship.pleaseEnter'), trigger: 'blur' } 
        ],
        enclosureFileName: [
          { required: true, message: this.$t('internship.attachment'), trigger: 'blur' } 
        ],
        baseContactEmail: [
          { required: true, message: this.$t('internship.pleaseEmail'), trigger: 'blur' } 
        ],
        address: [
          { required: true, message: this.$t('internship.pleaseEnter'), trigger: 'blur' } //"请选择证件类型"
        ],
        baseContactPhone: [
          { required: true, validator: validateNum, trigger: 'blur' } 
        ],
        baseContactPerson: [
          { required: true, message: this.$t('internship.pleaseEnter'), trigger: 'blur' } 
        ],
        collegeAcademy: [
          { required: true, message: this.$t('graduate.pleaseSelect'), trigger: 'change' } 
        ],
        
      },
      
    };
  },
  filters: {
    collegeAcademyList(val, array) {
      let str = "";
      for (let item of array) {
        if (val === item.value) {
          str = item.label;
        }
      }
      return str;
    },
    collegeAcademy(val, array) {
      let list = [];
      let str = [];
      if (val) {
        list = val.split(',');
        list.forEach(el => {
          array.forEach(ele => {
            if (el == ele.value) {
              str.push(ele.label);
            }
          });
        });
        return str.join();
      }
    }
  },
  methods: {
    // 下载
    download(enclosureFileUrl) {
      downloadfile(enclosureFileUrl);
    },
    // 勾选
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 删除行
    cancelRemove() {
      if (this.multipleSelection.length > 0) {
        this.multipleSelection.forEach(el => {
          this.dataList.forEach((ele, index) => {
            if (el.studentId === ele.studentId) {
              this.dataList.splice(index, 1);
            }
          });
        });
      } else {
        this.$message(this.$t('internship.deleteList'));
      }
    },
    // 新增
    cancelAdd() {
      this.dataList.push({
        studentId: '', name: '', status: true, grade: '', facultyI18n: '', professionI18n: '',
        trainingLevelI18n: '', trainingCategoryI18n: '', degreeTypeI18n: '', formLearningI18n: ''
      });
    },
    // 输入学号
    changeBlur(event) {
      let obj = {
        name: event.target.value,
        pageNum_: 1,
        pageSize_: 20
      };
      let dataList = [];
      graduateStudent.postFindStuInfoList(obj).then(res => {
        if (res.data.list.length === 1) {;
          let listDat = this.$route.query.row.major.includes(res.data.list[0].profession);
          // console.log(adc);
          // let list = this.$route.query.row.major.split(',');
          // let listDat = [];
          
          // list.forEach(el => {
          //   if (el === res.data.list[0].profession) {
          //     listDat.push(true);
          //   } else {
          //     listDat.push(false);
          //   }
          // });
          // if (listDat.includes(true)) {
          if (listDat) {

            this.dataList.push(res.data.list[0]);
            this.dataList.forEach((el, index) => {
              if (el.name =='') {
                this.dataList.splice(index, 1);
              }
            });
            let obj = {};
            let peon = this.dataList.reduce((cur,next) => {
                obj[next.studentId] ? "" : obj[next.studentId] = true && cur.push(next);
                return cur;
            },[]);
            this.dataList = peon;
          } else {
            this.$message(this.$t('internship.corresponding'));
          }
          
        }
      });
      
    },
    // 取消
    cancel() {
      let isEmpty = true;
      // for (let key in this.dataList) {
      if (this.dataList.length > 0) {
        isEmpty = false;
      }
      // }
      if (isEmpty) {
        this.innerVisible = false;
        // this.$refs['addform'].resetFields();
        this.goBack();
      } else {
        this.innerVisible = true;
      }
      // this.innerVisible = true;
    },
    // 提交
    submit() {
      let listDate = [];
      let listEdit = [];
      if (this.dataList.length > 0) {
        this.dataList.forEach(el => {
          // let obj = {
          //   needsId: this.$route.query.row.id,
          //   studentId: el.studentId,
          //   studentName: el.name
          // };
          listDate.push({
            needsId: this.$route.query.row.id,
            studentId: el.studentId,
            studentName: el.name
          });
        });
        listDate.forEach(el => {
          if (el.studentName) {
            listEdit.push(true);
          } else {
            listEdit.push(false);
          }
        });
        if (listEdit.includes(false)) {
            this.$message(this.$t('internship.AddData'));
          } else {
            graduateStudent.positionApplyAddApply(listDate).then(() => {
              this.$message.success(this.$t('internship.successfully'));
              setTimeout(() => {
                this.goBack();
              }, 1000);
            });
        }
      } else {
        this.$message(this.$t('internship.AddData'));
      }
    },
    // 分页
    handleSizeChange(val) {
      this.queryForm.pageSize_ = val;
      this.queryForm.pageNum_ = 1;
    },
    handleCurrentChange(val) {
      this.queryForm.pageNum_ = val;
    },
    // 字典获取
    getOptions() {
      // 筛选条件字典查询
      let data = {
        lang: this.$store.getters.language || "cn",
        type: "allChild",
        keys: ['X_YX', 'G_ZY']
      };
      queryDic(data).then(res => {
        UTILS.fillSelect(
          {
            degreeType: "G_ZY",
            faculty: "X_YX"
          },
          res.data,
          this.options
        );
      });
    },
    // 通过学院获取专业
    collegeChange(val) {
      // this.queryForm.majorList = [];
      if (val.length > 0) {
        let collegeList = val;
        graduateStudent.getDegreeByCollege(collegeList).then(res => {
          this.options.profession = res.data;
        });
      } else {
        this.options.profession = [];
      }
    },
    goBack() {
      this.$store.commit("delete_tabs", this.$route.path);
      this.$router.go(-1)
    },
    // 岗位需求人数
    handleChangeNum (val) {
      
    },
    // 输入网址
    changeEmail(val) {
      // console.log(val);
      let re = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
      if (val) {
        if (re.test(val)) {
          return this.queryForm.baseContactEmail = val;
          // return true;
        }else{
          this.$message(this.$t('mainbase.pleasEmail'));
          this.queryForm.baseContactEmail = '';
        }
      }
    },
    // 校验学校联系人电话
    changeNum(val) {
      let reg = /^[1][3,4,5,7,8][0-9]{9}$/;
      if (val) {
        if (reg.test(val)) {
          return this.queryForm.collegeContactPhone = val;
          // return true;
        }else{
          this.$message(this.$t('mainbase.pleasePhone'));
          this.queryForm.collegeContactPhone = '';
        }
      }
    },
    changeSelect(val) {
      // console.log(val, '112');
      this.dataList.forEach(el => {
        if (val === el.id) {
          this.queryForm.calendarYear = el.year;
          this.queryForm.calendarTerm = el.term;
          this.queryForm.calendarName = el.fullName;
        }
      });
    },
    changeCollege(val) {
      this.queryForm.collegeAcademy = '';
      if (val === '1') {
        this.rules.collegeAcademy[0].required = false;
      } else {
        this.rules.collegeAcademy[0].required = true;
      }
    },
    // 内层弹出确定
    confirmInner() {
      this.innerVisible = false;
      this.$store.commit("delete_tabs", this.$route.path);
      this.$router.go(-1);
    },
    // 内层弹出取消
    cancelInner() {
      this.innerVisible = false;
    },
    // 内层弹出保存关闭
    confirmAndClose() {
      this.innerVisible = false;
      this.submit();
    },
    // 取消
    cancelDialog() {
      this.cancel();
      // this.$store.commit("delete_tabs", this.$route.path);
      // this.$router.go(-1);
     
    },
    // 重置
    reset() {
      this.$emit("cancel-dialog", false);
    },
    // 上传之前
    handleChange() {},
    // 删除
    handleRemove() {
      this.queryForm.enclosureFileName = '';
      this.queryForm.enclosureFileUrl = '';
    },
    // 上传成功
    handleSuccess(res, file, fileList) {
      // console.log(res, file, fileList);
      this.fileList = fileList
      this.queryForm.enclosureFileName = 'a';
      this.setInformationAttachList(fileList);
    },
    setInformationAttachList(fileList) {
      let attachList = [];
      fileList.forEach(item => {
        if (item.response && item.response.data) {
          const uploadedObj = item.response.data[item.name];
          if (uploadedObj) {
            // const attachObj = {};
            // attachObj.fileName = uploadedObj.fileName;
            // attachObj.fileLacation = uploadedObj.objectkey;
            // attachList.push(attachObj);
            this.queryForm.enclosureFileName = uploadedObj.fileName;
            this.queryForm.enclosureFileUrl = uploadedObj.objectkey;
          }
        }
      });
      // return attachList;
    },
    // 获取表格数据
    assignment(id) {
      graduateStudent.pgetDetailNeeds(id).then(res => {
        // console.log(res);
        this.dataForm = res.data;
      });
    },
  },
  // async
  created() {
    this.getOptions();
    this.assignment(this.$route.query.row.id);
  }
};
</script>
